---
title: CLI Reference
description:
  You can use the Command-Line Interface (CLI) provided by Panda to develop, build, and preview your project from a
  terminal window.
---

Use Panda's Command-Line Interface (CLI) to develop, build, and preview your project from a terminal.

## init

Initialize Panda in a project. This process will:

- Create a `panda.config.ts` file in your project with the default settings and presets.
- Emit CSS utilities for your project in the specified `output` directory.

```bash
pnpm panda init

# Initialize with interactive mode
pnpm panda init --interactive

# Initialize with PostCSS config
pnpm panda init --postcss
```

| Flag                          | Description                                                   | Related                                                       |
| ----------------------------- | ------------------------------------------------------------- | ------------------------------------------------------------- |
| `--interactive, -i`           | Whether to run the interactive mode                           | -                                                             |
| `--force, -f`                 | Whether to overwrite existing files                           | -                                                             |
| `--postcss, -p`               | Whether to emit a [postcss](https://postcss.org/) config file | -                                                             |
| `--config, -c <path>`         | Path to Panda config file                                     | [`config`](/docs/references/config)                           |
| `--cwd <dir>`                 | Path to current working directory                             | -                                                             |
| `--silent`                    | Whether to suppress all output                                | -                                                             |
| `--no-gitignore`              | Whether to update gitignore with the output directory         | -                                                             |
| `--no-codegen`                | Whether to run the codegen process                            | -                                                             |
| `--out-extension <ext>`       | The extension of the generated js files (default: 'mjs')      | [`config.outExtension`](/docs/references/config#outextension) |
| `--outdir <dir>`              | The output directory for the generated files                  | [`config.outdir`](/docs/references/config#outdir)             |
| `--jsx-framework <framework>` | The jsx framework to use                                      | [`config.jsxFramework`](/docs/references/config#jsxframework) |
| `--syntax <syntax>`           | The css syntax preference                                     | [`config.syntax`](/docs/references/config#syntax)             |
| `--strict-tokens`             | Set strictTokens to true                                      | [`config.strictTokens`](/docs/references/config#stricttokens) |
| `--logfile <file>`            | Outputs logs to a file                                        | [Debugging](/docs/guides/debugging)                           |

---

## panda

Run the extract process to generate static CSS from your project.

By default it will scan and generate CSS for the entire project depending on your include and exclude options from your
config file.

```bash
pnpm panda
# You can also scan a specific file or folder
# using the optional glob argument
pnpm panda src/components/Button.tsx
pnpm panda "./src/components/**"
```

| Flag                    | Description                                                            | Related                                                           |
| ----------------------- | ---------------------------------------------------------------------- | ----------------------------------------------------------------- |
| `--outdir, -o [dir]`    | The output directory for the generated CSS utilities                   | [`config.outdir`](/docs/references/config#outdir)                 |
| `--minify, -m`          | Whether to minify the generated CSS                                    | [`config.minify`](/docs/references/config#minify)                 |
| `--watch, -w`           | Whether to watch for changes in the project                            | [`config.watch`](/docs/references/config#watch)                   |
| `--poll`                | Whether to poll for file changes                                       | [`config.poll`](/docs/references/config#poll)                     |
| `--config, -c <path>`   | The path to the config file                                            | [`config`](/docs/references/config.md)                            |
| `--cwd <path>`          | The current working directory                                          | [`config.cwd`](/docs/references/config#cwd)                       |
| `--preflight`           | Whether to emit the preflight or reset CSS                             | [`config.preflight`](/docs/references/config#preflight)           |
| `--silent`              | Whether to suppress all output                                         | [`config.logLevel`](/docs/references/config#log-level)            |
| `--exclude, -e <files>` | Files to exclude from the extract process                              | [`config`](/docs/references/config.md)                            |
| `--clean`               | Whether to clean the output directory before emitting                  | [`config.clean`](/docs/references/config#clean)                   |
| `--hash`                | Whether to hash the output classnames                                  | [`config.hash`](/docs/references/config#hash)                     |
| `--lightningcss`        | Use `lightningcss` instead of `postcss` for css optimization           | [`config.lightningcss`](/docs/references/config#lightningcss)     |
| `--polyfill`            | Polyfill CSS @layers at-rules for older browsers                       | [`config.polyfill`](/docs/references/config#polyfill)             |
| `--emitTokensOnly`      | Whether to only emit the `tokens` directory                            | [`config.emitTokensOnly`](/docs/references/config#emittokensonly) |
| `--cpu-prof`            | Generate a `panda-{command}-{timestamp}.cpuprofile` file for profiling | [Debugging](/docs/guides/debugging)                               |
| `--logfile <file>`      | Outputs logs to a file                                                 | [Debugging](/docs/guides/debugging)                               |

---

## codegen

Generate new CSS utilities for your project based on the configuration file.

```bash
pnpm panda codegen

# Clean output directory before generating
pnpm panda codegen --clean

# Watch for config changes
pnpm panda codegen --watch
```

| Flag                  | Description                                                            | Related                                                |
| --------------------- | ---------------------------------------------------------------------- | ------------------------------------------------------ |
| `--silent`            | Whether to suppress all output                                         | [`config.logLevel`](/docs/references/config#log-level) |
| `--clean`             | Whether to clean the output directory before emitting                  | [`config.clean`](/docs/references/config#clean)        |
| `--config, -c <path>` | Path to Panda config file                                              | [`config`](/docs/references/config.md)                 |
| `--watch, -w`         | Whether to watch for changes in the project                            | [`config.watch`](/docs/references/config#watch)        |
| `--poll, -p`          | Whether to poll for file changes                                       | [`config.poll`](/docs/references/config#poll)          |
| `--cwd <path>`        | Current working directory                                              | [`config.cwd`](/docs/references/config#cwd)            |
| `--cpu-prof`          | Generate a `panda-{command}-{timestamp}.cpuprofile` file for profiling | [Debugging](/docs/guides/debugging)                    |
| `--logfile <file>`    | Outputs logs to a file                                                 | [Debugging](/docs/guides/debugging)                    |

## cssgen

Generate the CSS from files.

You can use a `glob` to override the `config.include` option like this:

`panda cssgen "src/**/*.css" --outfile dist.css`

or you can use it with a `{type}` argument to generate only a specific type of CSS:

- preflight
- tokens
- static
- global
- keyframes

> Note that this only works when passing an `--outfile`.

You can use it like this:

```bash
panda cssgen "static" --outfile dist/static.css
```

| Flag                   | Description                                                                       | Related                                                       |
| ---------------------- | --------------------------------------------------------------------------------- | ------------------------------------------------------------- |
| `--outfile, -o <file>` | Output file for extracted css, default to './styled-system/styles.css'            | -                                                             |
| `--silent`             | Whether to suppress all output                                                    | [`config.logLevel`](/docs/references/config#log-level)        |
| `--minify, -m`         | Whether to minify the generated CSS                                               | [`config.minify`](/docs/references/config#minify)             |
| `--clean`              | Whether to clean the output directory before emitting                             | [`config.clean`](/docs/references/config#clean)               |
| `--config, -c <path>`  | Path to Panda config file                                                         | [`config`](/docs/references/config.md)                        |
| `--watch, -w`          | Whether to watch for changes in the project                                       | [`config.watch`](/docs/references/config#watch)               |
| `--minimal`            | Skip generating CSS for theme tokens, preflight, keyframes, static and global css | -                                                             |
| `--poll, -p`           | Whether to poll for file changes                                                  | [`config.poll`](/docs/references/config#poll)                 |
| `--cwd <path>`         | Current working directory                                                         | [`config.cwd`](/docs/references/config#cwd)                   |
| `--lightningcss`       | Use `lightningcss` instead of `postcss` for css optimization                      | [`config.lightningcss`](/docs/references/config#lightningcss) |
| `--polyfill`           | Polyfill CSS @layers at-rules for older browsers                                  | [`config.polyfill`](/docs/references/config#polyfill)         |
| `--cpu-prof`           | Generate a `panda-{command}-{timestamp}.cpuprofile` file for profiling            | [Debugging](/docs/guides/debugging)                           |
| `--logfile <file>`     | Outputs logs to a file                                                            | [Debugging](/docs/guides/debugging)                           |

## studio

Realtime documentation for your design tokens.

```bash
pnpm panda studio

# Build static studio site
pnpm panda studio --build

# Preview built studio
pnpm panda studio --preview

# Use custom port
pnpm panda studio --port 3000
```

| Flag                  | Description                       | Related                                     |
| --------------------- | --------------------------------- | ------------------------------------------- |
| `--build`             | Build                             | -                                           |
| `--preview`           | Preview                           | -                                           |
| `--port <port>`       | Use custom port                   | -                                           |
| `--host`              | Expose to custom host             | -                                           |
| `--config, -c <path>` | Path to Panda config file         | [`config`](/docs/references/config.md)      |
| `--cwd <path>`        | Current working directory         | [`config.cwd`](/docs/references/config#cwd) |
| `--outdir <dir>`      | Output directory for static files | -                                           |
| `--base <path>`       | Base path of project              | -                                           |

## analyze

Analyze design token and recipe usage.

By default, it will analyze your project based on the `include` and `exclude` config options.

```bash
pnpm panda analyze

# analyze a specific file
pnpm panda analyze src/components/Button.tsx

# analyze a specific glob
pnpm panda analyze "src/components/**"
```

| Flag                   | Description                                  | Related                                                |
| ---------------------- | -------------------------------------------- | ------------------------------------------------------ |
| `--outfile <filepath>` | Output analyze report in given JSON filepath | -                                                      |
| `--silent`             | Whether to suppress all output               | [`config.logLevel`](/docs/references/config#log-level) |
| `--config, -c <path>`  | Path to Panda config file                    | [`config`](/docs/references/config.md)                 |
| `--cwd <path>`         | Current working directory                    | [`config.cwd`](/docs/references/config#cwd)            |

## debug

Debug design token extraction & CSS generated from files in glob.

More details in [Debugging](/docs/guides/debugging) docs.

```bash
pnpm panda debug

# Debug a specific file
pnpm panda debug src/components/Button.tsx

# Output to stdout without writing files
pnpm panda debug --dry

# Only output resolved config
pnpm panda debug --only-config
```

| Flag                  | Description                                                            | Related                                                   |
| --------------------- | ---------------------------------------------------------------------- | --------------------------------------------------------- |
| `--silent`            | Whether to suppress all output                                         | -                                                         |
| `--dry`               | Output debug files in stdout without writing to disk                   | -                                                         |
| `--outdir <dir>`      | Output directory for debug files, defaults to `../styled-system/debug` | -                                                         |
| `--only-config`       | Should only output the config file, default to 'false'                 | -                                                         |
| `--config, -c <path>` | Path to Panda config file                                              | [`config`](/docs/references/config.md)                    |
| `--cwd <path>`        | Current working directory                                              | [`config.cwd`](/docs/references/config#cwd)               |
| `--cpu-prof`          | Generate a `panda-{command}-{timestamp}.cpuprofile` file for profiling | [Debugging](/docs/guides/debugging#performance-profiling) |
| `--logfile <file>`    | Outputs logs to a file                                                 | [Debugging](/docs/guides/debugging)                       |

## ship

Ship extract result from files in glob.

By default it will extract from the entire project depending on your include and exclude options from your config file.

```bash
pnpm panda ship
# You can also analyze a specific file or folder
# using the optional glob argument
pnpm panda ship src/components/Button.tsx
pnpm panda ship "./src/components/**"
```

| Flag                   | Description                                                                                 | Related                                                |
| ---------------------- | ------------------------------------------------------------------------------------------- | ------------------------------------------------------ |
| `--outfile <filepath>` | Output path for the JSON build info file, default to './styled-system/panda.buildinfo.json' | -                                                      |
| `--silent`             | Whether to suppress all output                                                              | [`config.logLevel`](/docs/references/config#log-level) |
| `--minify, -m`         | Whether to minify the generated JSON                                                        | -                                                      |
| `--config, -c <path>`  | Path to Panda config file                                                                   | [`config`](/docs/references/config.md)                 |
| `--cwd <path>`         | Current working directory                                                                   | [`config.cwd`](/docs/references/config#cwd)            |
| `--watch, -w`          | Whether to watch for changes in the project                                                 | [`config.watch`](/docs/references/config#watch)        |
| `--poll, -p`           | Whether to poll for file changes                                                            | [`config.poll`](/docs/references/config#poll)          |

## emit-pkg

Emit package.json with entrypoints, can be used to create a workspace package dedicated to the
[`config.outdir`](/docs/references/config#outdir), in combination with
[`config.importMap`](/docs/references/config#importmap)

```bash
pnpm panda emit-pkg

# Specify output directory
pnpm panda emit-pkg --outdir styled-system
```

| Flag             | Description                                          | Related                                                |
| ---------------- | ---------------------------------------------------- | ------------------------------------------------------ |
| `--outdir <dir>` | The output directory for the generated CSS utilities | [`config.outdir`](/docs/references/config#outdir)      |
| `--base <path>`  | The base directory of the package.json entrypoints   | -                                                      |
| `--silent`       | Whether to suppress all output                       | [`config.logLevel`](/docs/references/config#log-level) |
| `--cwd <path>`   | Current working directory                            | [`config.cwd`](/docs/references/config#cwd)            |
